<script lang="ts" setup>
import type { TableColumns } from '@/types/antd'

defineOptions({
	name: 'baseArea_AreasManger'
})

const areaTree = ref<any[]>([])
const isEditShow = ref(false)
const editFormRef = ref()

const columns = computed(
	(): TableColumns =>
		[
			{
				title: t('地区管理.地区名'),
				dataIndex: 'name',
				align: 'center' as const,
				key: 'name'
			},
			{
				title: t('地区管理.级别'),
				dataIndex: 'level',
				customRender: ({ text, record, index, column }: any) => {
					let title: number | string = ''
					Object.entries(Enums.baseData.areas.levelDatas).forEach(item => {
						if (item[1][0] === text) {
							title = item[1][1]
						}
					})
					return title
				},
				align: 'center' as const,
				key: 'level'
			},
			{
				title: t('地区管理.全名'),
				dataIndex: 'mergerName',
				align: 'center' as const,
				key: 'mergerName'
			},
			{
				title: t('地区管理.简称'),
				dataIndex: 'prefix',
				align: 'center' as const,
				key: 'prefix'
			},
			{
				title: t('地区管理.邮编'),
				dataIndex: 'zipCode',
				align: 'center' as const,
				key: 'zipCode'
			},
			{
				title: t('地区管理.ID'),
				dataIndex: 'id',
				align: 'center' as const,
				key: 'id'
			},
			{
				title: t('地区管理.操作'),
				key: 'action',
				dataIndex: 'action',
				align: 'center' as const
			}
		] as TableColumns
)

const editForm = reactive({
	isAdd: Enums.common.isDatas.N[0],
	id: 0,
	name: '',
	status: '',
	pid: 0,
	pName: '',
	level: Enums.baseData.areas.levelDatas.CITY[0]
})

const editFormRules = {
	id: [{ required: true, message: t('地区管理.请输入地区编号') }],
	name: [{ required: true, message: t('地区管理.请输入地区名') }]
}

const getAreaTree = () => {
	const formParams = {
		permissionName: '基础数据-地区数据管理'
	}
	Api.post('/base-data/areas/table-select', formParams, true).then((res: any) => {
		areaTree.value = res.list
	})
}

const loadChildren = (expanded: boolean, record: any) => {
	if (expanded) {
		const formParams = {
			permissionName: '基础数据-地区数据管理',
			pid: record.id
		}
		Api.post('/base-data/areas/table-select', formParams, true).then((res: any) => {
			record.children = res.list
		})
	}
}

const showEditModal = (record: any, isAdd = Enums.common.isDatas.N[0]) => {
	Object.assign(editForm, {
		isAdd: isAdd,
		id: record.id || '',
		pid: record.pid || 0,
		pName: record.pName || '',
		name: record.name || '',
		level: record.level || Enums.baseData.areas.levelDatas.CITY[0]
	})
	isEditShow.value = true
}

const getNode = (tree: any[], id: string) => {
	for (const item of tree) {
		if (item.id === id) {
			return item
		} else {
			if (item.children) {
				return getNode(item.children, id)
			}
		}
	}
}

const editOk = () => {
	editFormRef.value
		.validate()
		.then((valid: any) => {
			const formParams: any = {
				isAdd: editForm.isAdd,
				id: editForm.id,
				pid: editForm.pid,
				name: valid.name
			}
			if (editForm.isAdd == Enums.common.isDatas.Y[0]) {
				formParams.level = Number(editForm.level) + 1
			} else {
				formParams.level = editForm.level
			}
			formParams.permissionName = '基础数据-地区数据管理'
			Api.post('/base-data/areas/add-or-edit', formParams, true)
				.then(res => {
					loadChildren(true, getNode(areaTree.value, formParams.pid))
					Api.notify(t('地区管理.保存成功'))
				})
				.finally(() => {
					isEditShow.value = false
				})
		})
		.catch((error: any) => {
			console.log(error)
		})
}

const editCancel = () => {
	isEditShow.value = false
}

const del = (record: any) => {
	const formParams: any = { id: record.id }
	formParams.permissionName = '基础数据-地区数据管理'
	Api.post('/base-data/areas/del', formParams, true).then(res => {
		loadChildren(true, getNode(areaTree.value, record.pid))
		Api.notify(t('地区管理.删除成功'))
	})
}

onMounted(() => {
	getAreaTree()
})
</script>

<template>
	<IsGuest>
		<view>
			<a-table
				:columns="columns"
				:bordered="true"
				:rowKey="record => record.id"
				@expand="loadChildren"
				:pagination="false"
				:data-source="areaTree">
				<template #bodyCell="{ text, record, index, column }">
					<template v-if="column.key === 'action'">
						<a-button
							v-if="record.level !== Enums.baseData.areas.levelDatas.COUNTY[0]"
							type="primary"
							@click="
								showEditModal(
									{ pid: record.id, pName: record.name, level: record.level },
									Enums.common.isDatas.Y[0]
								)
							">
							{{ t('地区管理.添加子级') }}
						</a-button>
						<a-button @click="showEditModal(record)">{{ t('地区管理.编辑') }}</a-button>
						<a-popconfirm
							:title="t('地区管理.删除确认')"
							:ok-text="t('地区管理.是')"
							:cancel-text="t('地区管理.否')"
							@confirm="del(record)">
							<a-button danger>{{ t('地区管理.删除') }}</a-button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</view>
		<view>
			<a-modal
				:title="editForm.isAdd === Enums.common.isDatas.N[0] ? '编辑' : '添加'"
				:open="isEditShow"
				@ok="editOk"
				@cancel="editCancel">
				<a-form
					ref="editForm"
					:model="editForm"
					:label-col="{ style: { width: '180px' } }"
					:rules="editFormRules">
					<a-form-item :label="t('地区管理.上级地区')" v-if="editForm.pid > 0">
						{{ editForm.pName }} ({{ editForm.pid }})
					</a-form-item>
					<a-form-item :label="t('地区管理.地区编号')" name="id">
						<a-input
							v-model:value="editForm.id"
							:placeholder="t('地区管理.请输入地区编号')" />
					</a-form-item>
					<a-form-item :label="t('地区管理.地区名')" name="name">
						<a-input
							v-model:value="editForm.name"
							:placeholder="t('地区管理.请输入地区名')" />
					</a-form-item>
				</a-form>
			</a-modal>
		</view>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
